<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 200px;
        }

        button {
            vertical-align: bottom;
        }

        ul li {
            background-color: pink;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="text">
    <button>发布</button>
    <ul></ul>

    <script>
        var inputTF = document.querySelector('input');
        var btn = document.querySelector('button');
        var ul_items = document.querySelector('ul');
        btn.onclick = function() {
            //1.判断是输入框中是否有内容
            if (inputTF.value == '') {
                return;
            }

            //1.创建li元素来保存输入框的内容
            var li_item = document.createElement('li');
            li_item.innerHTML = inputTF.value + "<a href='javascript:;'>删除</a>";
            // ul_items.appendChild(li_item);
            ul_items.insertBefore(li_item, ul_items.children[0]);

            //3.点击删除按钮需要删除该条内容
            var as = ul_items.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    //1. 删除该条内容
                    ul_items.removeChild(this.parentNode);
                }
            }
        }
    </script>
</body>
</html>